import React from 'react';
import classNames from 'classnames';

import {
  Panel,
  Collapse,
  Well
} from 'react-bootstrap';

class CollapseItem extends React.Component {

  constructor() {
    super();
    this.state = {
       open : false
    };
  }

  static propTypes = {
      title : React.PropTypes.string
  }

  handleCollapseClick(event){
    this.setState({
      open : !this.state.open
    })
  }

  render() {
    
    let { title } = this.props;

    return(
        <div>
             <Well className="collapse-title" bsSize="small" onClick={ this.handleCollapseClick.bind(this) }>
              { title }
              <span className="collapse-arrow">
                <i className="iconfont icon-forward"></i>
              </span>
             </Well>
             <Panel className="collapse-content" collapsible expanded={this.state.open}>
                { this.props.children }
             </Panel>
        </div>
    );
  }
}

export default CollapseItem;
